<template>
  <div id="tableView">
        <el-button type="success" icon="plus" @click="addClick">新增</el-button>
    <!--列表-->
    <el-row>
      <el-table
        :data="tableData"
        v-loading.body="loading"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="55">
        </el-table-column>
        <el-table-column
          prop="sname"
          label="科目"
          width="105">
        </el-table-column>
        <el-table-column
          prop="score"
          label="分数"
          width="150">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑</el-button>
            <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!--编辑界面-->
    <el-dialog title="修改页面" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="科目" prop="sname">
          <el-input v-model="editForm.sname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分数" prop="score">
          <el-input v-model="editForm.score" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible=false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      name: "mainList",
      data(){
        return{
          tableData:[],
          loading:false,
          editFormVisible:false,
          editForm:{
            id:"",
            sname:"",
            score:""
          },
          editLoading: false,
          goUrl:'',
          editFormRules: {
            sname: [
              { required: true, message: '请输入科目', trigger: 'blur' }
            ],
            score: [
              { required: true, message: '请输入分数', trigger: 'blur' }
            ]
          }
        }
      },

      /**
       * 显示数据库数据 ---渲染页面
       */
      created() {
       let  self = this;
        this.$http.post("/score/toList").then(res=>{
          self.tableData=res.data;
        })
      },
      methods:{
        loadingData:function(){
          var self = this;
          this.$http.post('score/toList',{}).then(res=>{
            self.tableData=res.data;
          })
        }, addClick:function () {
          this.editFormVisible = true;//显示弹出框
          //防止页面的缓存,重新把输入赋值为空
          this.editForm={
            id:'',
            sname:"",
            score:""
          };
          this.goUrl = "score/add";
        },
        /**
         * 修改列表参数
         * @param row
         */
        editClick:function(row){
          this.goUrl="score/update";
          this.editFormVisible = true;
          //把得到的行数据赋给editForm
          this.editForm = Object.assign({}, row);
          this.editForm.id = row.id;
          //this.editForm.sex = row.sex;
          //alert(this.editForm.sex);
        },
        /**
         * 删除列表数据
         * @param row
         */
        deleteClick:function(row){
        var _self = this;
        this.$confirm('确认删除吗?', '提示', {type: 'warning'}).then(function(){
          var url="score/del/"+row.id;
          _self.$http.post(url).then(function (response) {
            if(response.data>0){
              _self.$message({
                message: '删除成功',
                type: 'success'
              });
              _self.loadingData();//重新加载数据
            }
          });
        }).catch(function(e){
          if(e != "cancel")
            console.log("出现错误：" + e);
        });
      },
        /**
         * 点击事件
         */
        editSubmit:function(){
          let _self = this;
          this.$refs["editForm"].validate((valid) => {
            if (valid) {
              this.$http.post(this.goUrl,this.editForm).then(res=>{
                if(res.data>0){
                  _self.editFormVisible = false;// 让弹出层隐藏
                }
                let temp="";
                if(res.data>0){
                  _self.editFormVisible = false;// 让弹出层隐藏
                  _self.loadingData();//重新加载数据
                  temp="操作成功";
                }else {
                  temp="操作失败";
                }
                _self.$message({
                  message: temp,
                  type: 'success'
                });
              })
            } else {
              return false;
            }
          })
        },
      }
    }
</script>

<style>

</style>
